<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		
		<style type="text/css">
			.wrap{
				width: 1395px;
				height: 240px;
			}
			li{
				float: left;
				list-style: none;
				position: relative;
				margin-right: 2px;
			}
			li span p{
				font-size: 11px;
				line-height: 25px;
				text-align: left;
			}
			li span{
				display: block;
				position: absolute;
				left: 0;
				bottom: 3px;
				width: 320px;
				height: 40px;
				text-align: center;
				line-height: 40px;				
				font-weight: bold;
				transition:height  0.5s ease-in-out;
				opacity: 0.5;
				background: #000;
				color: #fff;
				overflow: hidden;
			}
			
			li span:hover{
				height:150px;
			}
		</style>
	</head>
	<body>
		<div class="wrap">
			<ul>
				<li><img src="img/1.jpg"/>
					<span>我是哈士奇
						<p> 养哈士奇永远不要撒手，它们也不是逃走，只是傻，要跑出去玩几个小时才会发现“矮马！我家呢？</p>
					</span>
				</li>
				<li>
					<img src="img/2.jpg"/>
					<span>我是哈士奇
						<p> 求求你别再惦记什么哈士奇买衣服的事了，人家是雪橇犬！可能你不知道雪橇，那你知道雪吗……你的狗目前三公斤，半年后预计二十公斤。</p>
					</span>					
				</li>
				<li>
					<img src="img/7.jpg"/>
					<span>我是哈士奇
						<p>  我诊所尚无哈士奇故意咬人先例，所有的哈士奇咬人都是因为跟你闹不分轻重下嘴狠了。我们在哈士奇的胃里找到过拖鞋，
							人民币，袜子，玻璃。这世上只有你想不到的，没有在哈士奇胃里找不到的。</p>
					</span>
				</li>
				<li>
					<img src="img/5.jpg"/>
					<span>我是哈士奇
						<p>经常听到身边的人说哈士奇长得像狼，仔细一看还真有点像，但是如果狼听到人们这么说，估计它会说：“咳。。你们这是在侮辱我的狼格，后果很严重！！”~</p>
					</span>
				</li>
			</ul>			
		</div>
	</body>
</html>
